<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display</title>
    <style>
        .div1 {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* display:inline 让块元素 变成行元素 此时宽高属性不生效 内容有多少就占多少 */
            display: inline;
            /* margin: 10px;
            padding: 20px; */
        }
        .div2 {
            background-color: #3fdaf9c1;
        }

        .span1 {
            background-color: rgba(137, 43, 226, 0.647);
            /* display:block; 让行元素变成块元素 此时可以设置 width、height 属性*/
            /* display: block; */
            /* display: inline-block 让元素具有行元素的特征，并且保持 width/height属性 */
            /* display: inline-block; */
            /* display: none 让元素不显示 并且不占据网页空间 */
            /* display: none; */
            /* visibility : hidden 让元素不显示 占据网页空间 */
            visibility: hidden;
            width: 200px;
            height: 200px;
            /* margin: 20px;
            padding: 20px; */
        }

    </style>
</head>
<body>
    <div class="div1">我是粉色的</div>
    <div class="div1 div2">我是蓝色的</div>
    <span class="span1">我是第一个span</span><span class="span1">我是第二个span</span>
    <span>hello</span>
</body>
</html>